<script lang="ts" setup>
import { h, ref } from "vue";
import { ElButton, ElInput } from "element-plus";
import { ProSelect } from "@/modules/package/form";
import EnumTag from "@/components/common/EnumTag.vue";

import ApiOrder from "@/api/order";
import useRefund from "./useRefund";
import useProTable from "@/hooks/useProTable";
import { EnumOrderStatus, EnumPayMode } from "@/utils/enum";

const refTable = ref();

const { refund } = useRefund(() => refTable.value?.refresh());

const tableColumns = [
  { label: "序号", prop: "id", width: 82 },
  { label: "订单信息", slot: "activityInfo" },
  // { label: "订单编号", prop: "sn", width: 250 },

  // {
  //   label: "原价",
  //   width: 140,
  //   slot: ({ row }: any) => "¥" + row.original_amount.toFixed(2),
  // },

  // {
  //   label: "优惠金额",
  //   width: 140,
  //   // slot: ({ row }: any) => "¥" + row.coupon_discount.toFixed(2),
  //   slot: ({ row }: any) => [
  //     "¥" + row.coupon_discount.toFixed(2),
  //     row.coupon_discount > 0 && h("p", `(券ID：${row.user_coupon_id})`),
  //   ],
  // },

  { label: "实付金额", slot: "orderPrice", width: 200 },
  // { label: "优惠金额", slot: "orderDiscount", width: 200 },
  // { label: "订单抽成", slot: "orderFee", width: 100 },
  { label: "交易流水号", prop: "transaction_id", width: 180 },
  {
    label: "订单状态",
    width: 100,
    slot: ({ row }: any) =>
      h(EnumTag, {
        effect: "dark",
        options: EnumOrderStatus,
        value: row.order_state,
      }),
  },
  {
    label: "支付方式",
    width: 110,
    slot: ({ row }: any) =>
      row.pay_mode && h(EnumTag, { options: EnumPayMode, value: row.pay_mode }),
  },
  { label: "下单时间", prop: "create_time", width: 120 },
  {
    label: "操作",
    width: 120,
    slot: ({ row }: any) =>
      row.trade_state === 3 &&
      h(
        ElButton,
        {
          link: true,
          type: "danger",
          onClick: () => refund(row, 2),
        },
        "退款"
      ),
  },
];

const formItems = [
  {
    col: 6,
    label: "订单编号",
    children: {
      type: ElInput,
      field: "sn",
      props: {
        clearable: true,
        placeholder: "请输入",
      },
    },
  },
  {
    col: 6,
    label: "交易流水号",
    children: {
      type: ElInput,
      field: "transaction_id",
      props: {
        clearable: true,
        placeholder: "请输入",
      },
    },
  },
  {
    col: 6,
    label: "交易状态",
    children: {
      type: ProSelect,
      field: "trade_state",
      props: {
        clearable: true,
        options: [
          // 1:待支付 2:拉起支付 3:已支付 4:已取消 5:已退款
          { label: "待支付", value: 1 },
          { label: "支付中", value: 2 },
          { label: "已支付", value: 3 },
          { label: "已取消", value: 4 },
          { label: "已退款", value: 5 },
          { label: "退款中", value: 6 },
        ],
      },
    },
  },
];

const [ProTable] = useProTable({
  showTableBar: false,

  fetchUrl: ApiOrder.chargeList,
  fetchOptions: {
    foramtFetchParams(params) {
      const { type, value, ...rest } = params;
      if (value) Reflect.set(rest, type, value);
      return rest;
    },
  },
  tableOptions: {
    columns: tableColumns,
  },
  formOptions: {
    formItems,
  },
});
</script>
<template>
  <ProTable>
    <template #table-activityInfo="{ row }">
      <div>
        <span class="font-gray-500">活动名称:</span> {{ row.activity_title }}
      </div>
      <div>
        <span class="font-gray-500">品牌名称:</span> {{ row.merchant_title }}
      </div>
      <div><span class="font-gray-500">订单编号:</span> {{ row.sn }}</div>
    </template>

    <template #table-orderDiscount="{ row }">
      <div>
        <span class="font-gray-500">订单金额: </span>
        ¥{{ (row.pay_price / 100).toFixed(2) }}
      </div>
      <div>
        <span class="font-gray-500">订单抽成: </span>
        ¥{{ (row.pay_fee / 100).toFixed(2) }}
      </div>
      <div>
        <span class="font-gray-500">抽成比例: </span>
        {{ row.rectipt_percent || 0 }}%
      </div>
    </template>

    <template #table-orderPrice="{ row }">
      <div>
        <span class="font-gray-500">订单金额: </span>
        ¥{{ (row.pay_price / 100).toFixed(2) }}
      </div>
      <div>
        <span class="font-gray-500">订单抽成: </span>
        ¥{{ (row.pay_fee / 100).toFixed(2) }}
      </div>
      <div>
        <span class="font-gray-500">抽成比例: </span>
        {{ row.rectipt_percent || 0 }}%
      </div>
    </template>

    <template #table-orderFee="{ row }">
      ¥{{ (row.pay_fee / 100).toFixed(2) }}
    </template>
  </ProTable>
</template>
